<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"	
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition  template="../templates/default.xhtml">
	
	<ui:define name="title">
		<h:outputText value="#{i18n['app.label.title']}" />
	</ui:define>
	
	<ui:define name="headerLogoTopNav">
		<ui:include src="/templates/includes/header.xhtml" />
	</ui:define>
	
	<ui:define name="content">

		<!-- Small Nav -->
		<div class="small-nav">
			#{i18n['app.label.breadcrumb.userManagement']}<span>&gt;</span>#{i18n['app.label.breadcrumb.listUsers']} 
		</div>
		<!-- End Small Nav -->
		
		<!-- Main -->
		<div id="main">
			<div class="cl">&nbsp;</div>
			
			<!-- Content -->
			<div id="content">
				
				<!-- Box -->
				<div class="box">
					<h:form id="form">
						<p:growl id="growl" showDetail="true" life="5000" />  
						
						<p:dataTable var="person" value="#{personBean.lazyModel}"
							rowKey="#{person.username}" paginator="true" rows="10"
							paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
							rowsPerPageTemplate="5,10,30,50,100" 
							selection="#{personBean.person}" selectionMode="single"
							id="personsTable" paginatorPosition="top"
							widgetVar="personsTable"  lazy="true"
							emptyMessage="#{i18n['app.label.table.userNotFound']}">

							<p:ajax event="rowSelect" listener="#{personBean.onRowSelect}" 
								update="#{(loginBean.isAdmin) ? ':form:displayEdit :form:photoEdit' : ':form:display :form:photoView'}" 
								oncomplete="#{(loginBean.isAdmin) ? 'personEditDialog.show()' : 'personDialog.show()'}"  />
							
							<f:facet name="header">  
					            <p:outputPanel>  
					            	<h:outputText value="List of Users" style="float:left; margin-top: 5px;" />  
					                <p:inputText  id="globalFilter" onkeyup="personsTable.filter()" 
					                	style="float:right;width:150px" />  
					                <h:outputText value="#{i18n['app.label.table.searchAllField']}:"  style="float:right; margin-top: 5px; margin-right: 5px;" />  
					            </p:outputPanel>  
					        </f:facet>  
  
							<p:column headerText="#{i18n['person.username']}" sortBy="#{person.username}"
								filterBy="#{person.username}" 
								id="username" >  
					            #{person.username}  
					        </p:column>
					        
					        <p:column headerText="#{i18n['person.firstName']}" sortBy="#{person.firstName}"
								filterBy="#{person.firstName}"
								id="firstName">  
					            #{person.firstName}  
					        </p:column>
					        
							<p:column headerText="#{i18n['person.email']}" sortBy="#{person.email}" 
								filterBy="#{person.email}" 
                				id="email">  
					            #{person.email}  
					        </p:column>
					        <f:facet name="footer">  
					            <p:commandButton id="addButton" value="#{i18n['btn.add']} #{i18n['user']}" icon="ui-icon-plus" 
					                    update=":formAdd:displayAdd" oncomplete="personAddDialog.show()"
					                    rendered="#{loginBean.isAdmin}"/>  
					        </f:facet>  
						</p:dataTable>

						<p:dialog header="#{i18n['app.label.dialog.userTitle']}" widgetVar="personDialog" resizable="false"  
					              width="500" showEffect="explode" hideEffect="explode" height="530" 
					               rendered="#{!loginBean.isAdmin}">  
					  		<h:panelGrid width="100%"  id="displayViewPhoto" columns="1" cellpadding="10"  
								cellspacing="10"  >  
							     <p:graphicImage  id="photoView" cache="true" value="#{personBean.graphicPhoto}"  /> 
							     
							</h:panelGrid>
					        <h:panelGrid id="display" columns="3" cellpadding="10"  
								cellspacing="10"  >  
					  
					            <h:outputText value="#{i18n['person.username']}" />  
					            <h:outputText value=" : " />  
					            <h:outputText value="#{personBean.person.username}" />  
					  			
					  			<h:outputText value="#{i18n['person.firstName']}" /> 
					  			<h:outputText value=" : " /> 
					            <h:outputText value="#{personBean.person.firstName}" />
					           
					            <h:outputText value="#{i18n['person.lastName']}" />  
					            <h:outputText value=" : " />
					            <h:outputText value="#{personBean.person.lastName}" />

					            <h:outputText value="#{i18n['person.civility']}" />  
					            <h:outputText value=" : " />
					            <h:outputText value="#{personBean.person.civility.label}" />  

					            <h:outputText value="#{i18n['person.birthDate']}" />  
					            <h:outputText value=" : " />
					            <p:calendar  style="width:200px;  " value="#{personBean.person.birthDate}" 
										pattern="dd/MM/yyyy"   navigator="true" readonlyInput="true" disabled="true"
										required="true"/>   
					            
					            <h:outputText value="#{i18n['person.email']}" /> 
					            <h:outputText value=" : " /> 
					            <h:outputText value="#{personBean.person.email}" />  
					            
					            <h:outputText value="#{i18n['person.isEnabled']}" />  
					            <h:outputText value=" : " />
					            <h:outputText value='#{(personBean.person.isEnabled eq "true") ? i18n["YES"] : i18n["NO"] }' id="isEnabled" />  
					            
					            <h:outputText value="#{i18n['roles']} "  /> 
					  			<h:outputText value=" : " /> 
					            <p:dataGrid style="width:200px;" value="#{personBean.person.securityRoles}" var="role" columns="1"
					            	  id="roles" rendered="#{personBean.person.securityRoles != null}" >
					            	<p:column>  
							               <h:outputText value="#{role.roleDesc}" />  
							        </p:column> 
					            </p:dataGrid>
					        </h:panelGrid>  
					    </p:dialog>  
					    
					    <p:dialog header="#{i18n['app.label.dialog.userTitle']}" widgetVar="personEditDialog" resizable="false"  
					             width="500" showEffect="explode" hideEffect="explode" height="530" 
					             rendered="#{loginBean.isAdmin}"  >  
							<h:panelGrid width="100%"  id="displayEditPhoto" columns="1" cellpadding="10"  
								cellspacing="10"  >  
								<p:fileUpload fileUploadListener="#{personBean.handleFileUpload}" 
										update=":form:growl :form:photoEdit" 
							            invalidFileMessage="#{i18n['app.label.fileUpload.photo.invalidFileMessage']}"
							            invalidSizeMessage="#{i18n['app.label.fileUpload.photo.invalidSizeMessage']}"
							            mode="advanced"   
							            sizeLimit="#{i18n['app.label.fileUpload.photo.sizeLimit']}"  
							            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
							            description="#{i18n['app.label.fileUpload.photo.description']}"
							            required="true"
							            requiredMessage="#{i18n['app.label.fileUpload.photo.requiredMessage']}" 
							            label="#{i18n['app.label.fileUpload.photo.label']}"
							            id="uploadPhotoEdit"
							            auto="true"
							            style=""
							             />  
							     <p:graphicImage  id="photoEdit" cache="true" value="#{personBean.graphicPhoto}"  /> 
							     
							</h:panelGrid>
							<h:panelGrid width="100%"  id="displayEdit" columns="3" cellpadding="10"  
								cellspacing="10"  >  
					  
					            <h:outputText value="#{i18n['person.username']}" />  
					            <h:outputText value=" : " />  
					            <p:inputText style="width:200px;  " value="#{personBean.person.username}" id="username" readonly="true"/>  
					  			
					  			
					  			<h:outputText value="#{i18n['person.email']}" /> 
					            <h:outputText value=" : " /> 
					            <p:inputText style="width:200px;  " value="#{personBean.person.email}" id="email" readonly="true"/>  
					            
					            
					  			<h:outputText value="#{i18n['person.firstName']}"  /> 
					  			<h:outputText value=" : " /> 
					            <p:inputText style="width:200px;  " value="#{personBean.person.firstName}" id="firstName"/>
					           
					           
					            <h:outputText value="#{i18n['person.lastName']}" />  
					            <h:outputText value=" : " />
					            <p:inputText  style="width:200px;  " value="#{personBean.person.lastName}" id="lastName"/>
					          

					            <h:outputText value="#{i18n['person.birthDate']}" />  
					            <h:outputText value=" : " />
					            <p:calendar  style="width:200px;  " value="#{personBean.person.birthDate}" id="birthDate" showButtonPanel="true"
										pattern="dd/MM/yyyy"  yearRange="c-50:c+10" navigator="true" readonlyInput="true"
										required="true" maxdate="#{common.todayDate}" /> 
					           
					            <h:outputText value="#{i18n['person.civility']}" />  
					            <h:outputText value=" : " />
					            <p:selectOneMenu  style="width:200px; "  id="civility"  value="#{personBean.person.civility}" effect="fade" >  
							            <f:selectItems value="#{enumObject.civilityValues}" var="c" 
    										itemValue="#{c}" itemLabel="#{c.label}"/> 
							    </p:selectOneMenu> 
					  			
					            <h:outputText value="#{i18n['roles']}" />  
					            <h:outputText value=" : " />
					            <p:selectManyCheckbox style="width:200px; " value="#{personBean.selectedRoles}" 
						            layout="pageDirection" >  
						            <f:selectItems value="#{personBean.roles}"  />  
						        </p:selectManyCheckbox>  
														
								<f:facet name="footer">  
					                <p:commandButton type="submit" id="Update"   style="margin-right: 20px;"
										actionListener="#{personBean.updateUser}" value="#{i18n['btn.update']}"
										icon="ui-icon-arrowrefresh-1-w" ajax="false"/>
					            </f:facet> 
					       	</h:panelGrid>   
					    </p:dialog>      
					</h:form>	
					
				</div>
				<!-- End Box -->

			</div>
			<!-- End Content -->
			
			<!-- Sidebar -->
			<div id="sidebar">
				
				<!-- Box -->
				<div class="box">
					
					<!-- Box Head -->
					<div class="box-head">
						<h2>#{i18n['app.label.box.management']}</h2>
					</div>
					<!-- End Box Head-->
					
					<div class="box-content">
					<h:form id="formAdd" enctype="multipart/form-data">
					
					<p:panel rendered="#{loginBean.isAdmin}">
						
						<div class="cl">&nbsp;</div>
						
						<p:dialog header="#{i18n['app.label.dialog.userTitle']}" widgetVar="personAddDialog" resizable="true"  
					             width="500" showEffect="explode" hideEffect="explode" height="500" 
					             rendered="#{loginBean.isAdmin}"  >  
							<h:panelGrid width="100%"  id="displayAddPhoto" columns="1" cellpadding="10"  
								cellspacing="10"  >  
								<p:fileUpload fileUploadListener="#{personBean.handleFileUpload}" 
										update=":form:growl :formAdd:photoAdd" 
							            invalidFileMessage="#{i18n['app.label.fileUpload.photo.invalidFileMessage']}"
							            invalidSizeMessage="#{i18n['app.label.fileUpload.photo.invalidSizeMessage']}"
							            mode="advanced"   
							            sizeLimit="#{i18n['app.label.fileUpload.photo.sizeLimit']}"  
							            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
							            description="#{i18n['app.label.fileUpload.photo.description']}"
							            required="true"
							            requiredMessage="#{i18n['app.label.fileUpload.photo.requiredMessage']}" 
							            label="#{i18n['app.label.fileUpload.photo.label']}"
							            id="uploadPhotoAdd"
							            auto="true"
							            style=" "
							            />  
							     <p:graphicImage  id="photoAdd" cache="true" value="#{personBean.graphicPhotoAdd}"  /> 
							      
							</h:panelGrid>
							<h:panelGrid width="100%"  id="displayAdd" columns="3" cellpadding="10"  
								cellspacing="10"  >  

					            <h:outputText value="#{i18n['person.username']}" />  
					            <h:outputText value=" : " />  
					            <p:inputText style="width:200px;  " 
					            	value="#{personBean.personAdd.username}" id="usernameAdd" 
					            	required="true" requiredMessage="#{i18n['person.username.requiredMessage']}"/>  
					  			
					  			
					  			<h:outputText value="#{i18n['person.email']}" /> 
					            <h:outputText value=" : " /> 
					            <p:inputText style="width:200px;  " 
					            	value="#{personBean.personAdd.email}" id="emailAdd" 
					            	required="true" requiredMessage="#{i18n['person.email.requiredMessage']}"/>  
					            
					            
					  			<h:outputText value="#{i18n['person.firstName']}"  /> 
					  			<h:outputText value=" : " /> 
					            <p:inputText style="width:200px;  " value="#{personBean.personAdd.firstName}" id="firstNameAdd"/>
					           
					           
					            <h:outputText value="#{i18n['person.lastName']}" />  
					            <h:outputText value=" : " />
					            <p:inputText  style="width:200px;  " value="#{personBean.personAdd.lastName}" id="lastNameAdd" />
					          

					            <h:outputText value="#{i18n['person.birthDate']}" />  
					            <h:outputText value=" : " />
					            <p:calendar  style="width:200px;  " value="#{personBean.personAdd.birthDate}" id="birthDateAdd" showButtonPanel="true"
										pattern="dd/MM/yyyy"  yearRange="c-50:c+1" navigator="true" readonlyInput="true"
										required="true" requiredMessage="#{i18n['person.birthDate.requiredMessage']}" 
										maxdate="#{common.todayDate}"  /> 
					           
					            <h:outputText value="#{i18n['person.civility']}" />  
					            <h:outputText value=" : " />
					            <p:selectOneMenu  style="width:200px; "  id="civility"  value="#{personBean.personAdd.civility}" effect="fade" >  
							            <f:selectItems value="#{enumObject.civilityValues}" var="c" 
    										itemValue="#{c}" itemLabel="#{c.label}"/> 
							    </p:selectOneMenu> 
							    
					            <h:outputText value="#{i18n['roles']}" />  
					            <h:outputText value=" : " />
					            <p:selectManyCheckbox style="width:200px; " value="#{personBean.selectedRoles}" 
						            layout="pageDirection" >  
						            <f:selectItems value="#{personBean.roles}"  />  
						        </p:selectManyCheckbox>  
														
								<f:facet name="footer">  
									<p:commandButton type="submit" id="Add"   style="margin-right: 20px;"
										actionListener="#{personBean.addUser}" value="#{i18n['btn.add']} #{i18n['user']}"
										icon="ui-icon-arrowrefresh-1-w" ajax="false"/>
					            </f:facet> 
					       	</h:panelGrid>   
					    </p:dialog>  
					
					</p:panel>
					</h:form>
					<div class="cl">&nbsp;</div>
						
					</div>
					 
				</div>
				
				<!-- End Box -->
			</div>
			<!-- End Sidebar -->
			
			<div class="cl">&nbsp;</div>			
		</div>
		<!-- Main -->
	</ui:define>
</ui:composition>
</html>